import useCheckboxGroup, {CheckboxGroupOption} from '@/hooks/checkboxGroupHook'
import useDeviceHook from '@/hooks/device'
import {CnNormalP} from '../text'

const BigScreenModal = defineComponent({
  props: {visible: Boolean, title: String, onOk: Function, onCancel: Function},
  emits: {
    ok: (data: {devIdList: number[]; showType: 1 | 2}): boolean => true,
    cancel: (): boolean => true
  },
  setup(props, {emit}) {
    const {
      checkboxGroupList: devCheckboxGroupList,
      setCheckboxGroupOptions: setDevCheckboxGroupList
    } = useCheckboxGroup()

    const {updateSimpleDevList} = useDeviceHook()

    const state = reactive<{
      currentDevIds: number[]
      showTypeCheckboxGroupOptions: CheckboxGroupOption[]
      currentShowType: 1 | 2
    }>({
      currentDevIds: [],
      currentShowType: 1,
      showTypeCheckboxGroupOptions: [
        {label: '切换每个设备的数据指标', value: 1, disabled: false},
        {label: '滚动展示每个设备的指标', value: 2, disabled: false}
      ]
    })

    watch(
      () => props.visible,
      n => {
        if (n) {
          updateSimpleDevList({
            updateList: false,
            success(data) {
              // updateCheckboxGroup<SimpleDeviceData>({
              //   list: data,
              //   valueKey: 'devId',
              //   labelKey: 'devName'
              // })
              const list: CheckboxGroupOption[] = []
              for (let i = 0; i < data.length; i++) {
                const dev = data[i]
                list.push({
                  label: dev.devName + `(${dev.isManage === '是' ? '我的设备' : '我的设备'})`,
                  value: dev.devId,
                  disabled: false
                })
              }
              setDevCheckboxGroupList(list)
            }
          })
        }
      }
    )

    return () => (
      <a-modal
        visible={props.visible}
        title='大屏显示'
        onOk={() => {
          emit('ok', {
            devIdList: state.currentDevIds,
            showType: state.currentShowType
          })
        }}
        onCancel={() => {
          emit('cancel')
        }}
      >
        <div class='px-24 py-20'>
          <CnNormalP class='mb-8 text-4Text'>给客户展示实时的水质状况。</CnNormalP>
          <CnNormalP class='mb-20 text-4Text'>您已经选择的设备如下，请确认显示：</CnNormalP>
          <div class='w-full max-h-330 overflow-y-auto mb-22'>
            <a-checkbox-group
              v-model={[state.currentDevIds, 'value']}
              options={devCheckboxGroupList.value}
              class='grid grid-cols-1 gap-y-10'
            />
          </div>
          <CnNormalP class='mb-20 text-4Text'>您希望给用户展示的大屏怎么展现？</CnNormalP>
          <div class='w-full'>
            <a-radio-group
              v-model={[state.currentShowType, 'value']}
              options={state.showTypeCheckboxGroupOptions}
              class='grid grid-cols-1 gap-y-10'
            />
          </div>
        </div>
      </a-modal>
    )
  }
})

export default BigScreenModal
